<!--threeJS 加载 gltf 模型-->
<template>
<div id="container" ref="canvasContainer"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

import {OrbitControls} from "three/addons/controls/OrbitControls.js";

export default {
    name: 'ThreejsLoadsGltf',
    data(){
        return {
            controls: null
        };
    },
    mounted() {
        this.initThreeJS();
    },
    methods: {
        initThreeJS() {
            const width = this.$refs.canvasContainer.clientWidth;
            const height = this.$refs.canvasContainer.clientHeight;

            // 场景
            const scene = new THREE.Scene();

            // 相机
            const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
            // camera.position.z = -200; // z轴移动
            // camera.position.x =200; // x轴移动
            // camera.position.y =200; // y轴移动
            // 中心移动
            camera.position.set(100, 100, 100);
            // camera.lookAt(100, 100, 100);
            // 渲染器
            const renderer = new THREE.WebGLRenderer({
                // 允许渲染器具有透明度
                alpha: true,
            });
            renderer.setClearColor(0x000000, 0);  // 设备背景色 透明
            renderer.setSize(width, height);
            this.$refs.canvasContainer.appendChild(renderer.domElement);

            // 光源 // 不打光，相当于黑暗，太亮或太暗都会影响看清楚模型
            // const light = new THREE.AmbientLight(0x404040); // soft white light 平行光
            // scene.add(light);

            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            scene.add(directionalLight);
            // 设置相机控件轨道控制器OrbitControls
            const controls = new OrbitControls(camera, renderer.domElement);
        // 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
        // console.log('controls.target', controls.target);
            controls.target.set(0, 0, 0); // 设置相机焦点位置 也就是拖动相机时，旋转中心的位置

        //     //相机位置与观察目标点最小值
        //     controls.minDistance = 200;
        //     //相机位置与观察目标点最大值
        //     controls.maxDistance = 100;
        //     // // 缩放范围
        //     controls.minZoom = 1;
        //     controls.maxZoom = 2;
        //     // 上下旋转范围
        //     controls.minPolarAngle = 0;//默认值0
        //     // controls.maxPolarAngle = Math.PI;//默认值Math.PI
        // // .maxPolarAngle属性设置为90度，这样不能看到工厂模型底部
        //     controls.maxPolarAngle = Math.PI/4;
        //     // 左右旋转范围
        //     controls.minAzimuthAngle = 0;
        //     controls.maxAzimuthAngle = Math.PI/4;

            // 加载器
            const loader = new GLTFLoader();
            loader.load(
                    // 资源URL
                    'http://192.168.0.31:8080/gltf/ball.gltf',
                    // 加载完成
                    function (gltf) {
                        scene.add(gltf.scene);
                        animate();
                    },
                    // 进度
                    function (xhr) {
                        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
                    },
                    // 错误
                    function (error) {
                        console.error('An error happened', error);
                    },
            );

            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
                controls.update();//update()函数内会执行camera.lookAt(controls.targe)
            }

            animate(); // 开始动画循环

        },

    }
}
</script>

<style scoped>
#container {
    width: 100%;
    height: 500px;
}
</style>
